<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 插槽 用法 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data(){
            return {
                msg:"c"
            }
        },
        template:`
                <div>{{msg}}</div>
                <JS > 插槽带嵌进来的
                        <div style="color:red">1111
                            <project/>    
                        </div>
                        <project/>     
                <JS />
                `
    })
    app.component("JS",{
        template:`
                <div>
                    <span>这是全局的子组件 JS </span>  
                    <hr/>
                    <span>XXX
                        <slot></slot>
                        </span>
                </div>
        `
    })
    app.component('project', {
        template: `<span style="color:blue;">项目是胖哥老三样</span>`
    })
    
    const vm = app.mount("#app")


//  * 1 插槽的声明 很简单<slot></slot>
//  * 2 然后在父组件中使用双标签进行调用
//  * 3 因为插槽支持任何的DOM元素  插槽可以强大到直接使用子组件
//  * 4 默认值的关键语法就是在<slot>插槽中直接输入值就可以了。
/*  
    插槽是什么？怎么用？
插槽slot， 是组件中的一块html模板，模板显示不显示，以及怎样显示由父组件来决定。
插槽的使用场景。当父组件中想要操作子组件，往子组件插入html代码片段的时候，这时候插槽的作用就是体现了
如果子组件不设置插槽，父组件是插入不了子组件中的代码片段的。
 三个插槽--
                

//1  匿名插槽

    <p></p>
    <slot></slot>		     
//1  命名插槽		    
     //元素有一个特殊的特性：name用来定义额外的插槽。一个不带 name 的 出口会带有隐含的名字“default”
           <p slot = "name" ></p>           //具名插槽使用场景：一个模版需要多个插槽。
           <slot name ="name" ></slot>
//3 作用域插槽。。
         子组件中有插槽，也有变量，这些变量如何在父组件中进行使用。


参考上面博客......
//博客https://blog.csdn.net/qq_46124502/article/details/107261997?biz_id=102&utm_term



*/

</script>